{% extends "index.html" %}

{% block content %}
	<div class="row">
		<div class="col-xs-12">
			<a href="/addServer/">
				<botton class="btn btn-primary  pull-right">
				<i class="icon-arrow-right icon-plus"></i>
						添加宿主机
				</botton>
			</a>

			<h3 class="header smaller lighter blue">
				<i class="icon-hand-right icon-animated-hand-pointer blue"></i>
				宿主机列表
			</h3>
			<div class="table-header">
				当前可操作的宿主机
			</div>
			<div class="table-responsive">
				<table id="sample-table-2" class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th >
								<label>
									<input type="checkbox" class="ace" />
									<span class="lbl"></span>
									主机名
								</label>
							</th>
							<th>管理IP地址</th>
							<th>CPU个数</th>
							<th class="hidden-480">内存(MB)</th>

							<th>
								<i class="icon-time bigger-110 hidden-480"></i>
								实例个数
							</th>

							<th class="hidden-480">状态</th>

							<th class="hidden-480">备注</th>

							<th class="col-sm-2">操作</th>
						</tr>
					</thead>

					<tbody>
					{% for ds in dataList %}
						<tr>
							<td >
								<label>
									<input type="checkbox" class="ace" />
									<span class="lbl"></span>
									<a href="/viewServer/{{ds.id}}/">
										{{ ds.hostname }}
									</a>
								</label>
							</td>

							<td>
								{{ ds.server_ip }}
							</td>
							<td class="col-xs-1">
								{{ ds.cpu_total }}
							</td>
							<td class="hidden-480">
								{{ ds.mem }}
							</td>
							<td>
								<span class="badge badge-success">{{ ds.instance }}</span>
							</td>
							<td class="hidden-480">
								{% if ds.status == 0 %}
									<span class="label label-success arrowed">
										Online
									</span>
								{% else %}
									<span class="label label-danger arrowed-in">
										Offline
									</span>
								{% endif %}
							</td>
							<td class="hidden-480">
								{{ ds.description }}
							</td>

							<td>
								<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
									<div class="btn-group">
										<button data-toggle="dropdown" class="btn btn-inverse btn-sm dropdown-toggle">
											<i class="icon-pencil bigger-130"> </i>
											<span class="icon-caret-down icon-on-right"></span>
										</button>

										<ul class="dropdown-menu dropdown-info pull-right">
											<li>
												<a href="/viewServer/{{ds.id}}/">详细信息</a>
											</li>
											<li>
												<a href="/addInstance/{{ ds.id }}">创建虚拟机</a>
											</li>
											<li>
												<a href="/configNetwork/{{ ds.id }}/">管理网络</a>
											</li>
											<li class="divider"></li>

											<li>
												<a href="javascript:" onclick="onBtnHandleServerSetName(this, {{ ds.id  }})">修改主机名</a>
											</li>
											<li>
												<a href="javascript:" onclick="onBtnHandleServerSetDesc(this, {{ ds.id  }})">设置备注</a>
											</li>

											<li>
												<a href="javascript:" onclick="onBtnHandleServer(this, {{ ds.id  }}, 'delete', '{{ ds.server_ip }}')">删除主机</a>
											</li>

<!-- 																		<li> -->
<!-- 																			<a href="#">配置</a> -->
<!-- 																		</li> -->
										</ul>
									</div>
								</div>
							</td>

						</tr>
					{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		if("ontouchend" in document) document.write("<script src='/static/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
	</script>

	<!-- page specific plugin scripts -->

	<script src="/static/js/jquery.dataTables.min.js"></script>
	<script src="/static/js/jquery.dataTables.bootstrap.js"></script>

	<script type="text/javascript">
		jQuery(function($) {
			var oTable1 = $('#sample-table-2').dataTable( {
			"aoColumns": [
			  { "bSortable": false },
			  null, null,null, null, null,
			  { "bSortable": false },
			  { "bSortable": false }
			] } );

			$('table th input:checkbox').on('click' , function(){
				var that = this;
				$(this).closest('table').find('tr > td:first-child input:checkbox')
				.each(function(){
					this.checked = that.checked;
					$(this).closest('tr').toggleClass('selected');
				});

			});

			$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
			function tooltip_placement(context, source) {
				var $source = $(source);
				var $parent = $source.closest('table')
				var off1 = $parent.offset();
				var w1 = $parent.width();

				var off2 = $source.offset();
				var w2 = $source.width();

				if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
				return 'left';
			}
		})

	   	function onBtnHandleServerSetName(obj, id){
	   		layer.prompt({title: '请输入新主机名', formType: 0}, function(value, index){
			  	layer.close(index);

				$.ajax({
					type: 'PUT',
					url: '/api/vmserver/hostname/'+ id +'/',
					data: value,
					success:function(response){
						layer.alert('修改成功', function() {
							layer.closeAll();
							window.location.reload();
						});
					},
					error:function(response){
						layer.alert('修改失败', {icon: 2});
					},
					complete: function(response){
						//btnObj.removeAttr('disabled');
					}
				});
			});
		}

	   	function onBtnHandleServerSetDesc(obj, id){
	   		layer.prompt({title: '请输入备注', formType: 0}, function(value, index){
			  	layer.close(index);

				$.ajax({
					type: 'PUT',
					url: '/api/vmserver/desc/'+ id +'/',
					data: value,
					success:function(response){
						layer.alert('修改成功', function() {
							layer.closeAll();
							window.location.reload();
						});
					},
					error:function(response){
						layer.alert('修改失败', {icon: 2});
					},
					complete: function(response){
						//btnObj.removeAttr('disabled');
					}
				});
			});
		}

	   	function onBtnHandleServer(obj,id,op,hostname){
			var btnObj = $(obj);
			btnObj.attr('disabled',true);
			if( op == 'delete' ){
				var txt=  "是否确认删除？"
			}
			var option = {
				title: "删除宿主机("+hostname+")",
				btn: parseInt("0011",2),
				onOk: function(){
					$.ajax({
					  	type: 'DELETE',
					  	url: '/api/vmserver/'+ id +'/',
					  	success:function(response){
							btnObj.removeAttr('disabled');
							window.wxc.xcConfirm('删除成功', window.wxc.xcConfirm.typeEnum.success);
							window.location.reload();
						},
						error:function(response){
							btnObj.removeAttr('disabled');
							window.wxc.xcConfirm("删除失败", window.wxc.xcConfirm.typeEnum.error);
						},
					});
				},
				onCancel:function(){
				},
				onClose:function(){
				}
			}
			window.wxc.xcConfirm(txt, "custom", option);
		}
	</script>
{% endblock %}
